<template>
	<view class="user-center">
		<button @tap="upt" style="float: right;margin: 10px;" type="default" size="mini" plain="true">修改用户信息</button>
		<view class="item">
			<text class="label">头像</text>
			<view v-if="isUpt">
				<image class="avatar" :src="tokeuse.icon" mode=""></image>
			</view>
			<view v-else style="display: flex;align-items: center;">
				
				<button v-if="!img" @tap="uploadIcon" type="default" size="mini" plain="true">上传头像</button>
				<image v-else class="avatar" :src="img" mode=""></image>
			</view>
		</view>
		<view class="item">
			<text class="label">用户名</text>
			<text class="text"  v-if="isUpt">{{tokeuse.username}}</text>
			<!-- <view v-else>
					<input type="text" class="ipt" v-model="userInfo.username" placeholder="请输入用户名"/>
			</view> -->
		</view>
		<view class="item">
			<text class="label">昵称</text>
			<text class="text"  v-if="isUpt">{{tokeuse.nickname}}</text>
			<view v-else>
					<input type="text" class="ipt"  v-model="tokeuse.nickname" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="item">
			<text class="label">手机号</text>
			<text class="text"  v-if="isUpt">{{tokeuse.phone}}</text>
			<view v-else>
					<input type="text" class="ipt" v-model="tokeuse.phone" placeholder="请输入手机号" />
			</view>
		</view>
		<button class="btn-logout" v-if="!isUpt" type="default" @tap="uptUserInfo">更新</button>
		<button class="btn-logout" v-else type="default" @tap="doLogout">退出登陆</button>
	
	</view>
</template>

<script>
	import baseurl from "@/api/baseurl.js"
	import {
		updateMemberInfo
	} from "@/api/user/updateUserInfo/index.js"
	export default {
		data() {
			return {
				isUpt:true,
				tokeuse:{},//本地存的个人信息
				img:"",
			};
		},
		onShow() {
			var tokenUse = uni.getStorageSync("toten_use")
			this.tokeuse = tokenUse.userInfo
			console.log("获取本地的个人信息",this.tokeuse);
		},
		methods:{
			// 更新
			uptUserInfo(){
				if(this.img){
						this.tokeuse.icon = this.img;
				}
			updateMemberInfo(this.tokeuse)
			.then(res =>{
				console.log("更新资料",res);
				if(res.success == true){
					uni.showToast({
						title:"更新成功即将退出登录.请重新登录"
					})
					setTimeout( ()=>{
						this.doLogout() //再次调用退出登录
					},1000)
				}
			})
				
			},
			// 退出登录
			doLogout(){
				uni.clearStorageSync();
				uni.showToast({
					title:"退出成功,即将跳转到登录页"
				})
				setTimeout( function () {
					uni.navigateTo({
						url:"../login/login"
					})
				},1000)
				
			},
			
			// 点击修改用户
			upt(){
				this.isUpt = false
			},
			
			// 点击上传图片 1先掉起图片 2上传图片 3把链接赋值
			uploadIcon(){
				var _this = this
				uni.chooseImage({
					success(chooseImageRes) {
						console.log("图片上传",chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url:baseurl+"/lejuClient/login/uploadAvatar",
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
							    'user': 'test'
							},
							success: (uploadFileRes) => {
								_this.img = JSON.parse(uploadFileRes.data).data.fileUrl
								console.log("上传的图片",this.img);
							}
						})
						
					}
				})
			
			}
		}	
	}
</script>

<style lang="scss" scoped>
.ipt{
		text-align: right;
	}
	.user-center{
		.item{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			line-height: 94rpx;
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			border-bottom: 1px solid #E5E5E5;
			&:nth-child(1){
				margin-top: 20rpx;
			}
			.avatar{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.label{
				color: #494949;
			}
			.text{
				color: #A1A1A1;
			}
		}
		.btn-logout{
			position: fixed;
			left: 50%;
			bottom: 20%;
			margin-left: -185rpx;
			width: 370rpx;
			height: 88rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
			background: #1C4B47;
			border-radius: 8px;
		}
	}
</style>
